<template>
    <div>
        <template>
            <div id="pieReport" style="width: 400px;height: 300px;"></div>
            <div class="user-room">
                <div id="scatterReport" style="width: 1000px;height: 400px;"></div>
            </div>
        </template>

        <!--        饼状图对应学生列表-->
        <el-drawer
                title="我是标题"
                :visible.sync="drawer"
                :with-header="false">
            <el-table :data="curTableData">
                <el-table-column :label="item.propName" :property="item.prop" v-for="(item) in tableColumnList"
                                 :key="item.prop" sortable>
                    <template slot-scope="scope">
                        {{scope.row[scope.column.property]}}
                    </template>
                </el-table-column>
            </el-table>
        </el-drawer>
    </div>
</template>


<script>
    import * as echarts from 'echarts';

    export default {
        name: "TeacherScoreView",
        data() {
            return {
                tableColumnList: [
                    {prop: 'username', propName: '用户名'},
                    {prop: 'name', propName: '姓名'},
                    {prop: 'phone', propName: '联系方式'},
                    {prop: 'affiliation', propName: '归属'},
                ],
                curTableData: [],


                drawer: false, // 饼状图对应人群的弹框
                examRow: "", // 考试数据

                // 弹框数据
                goodData: [],
                badData: [],
                unFinishData: [],
                missData: [],

                // 散点图
                charts: "",
                scatterData: [],
                score: this.$route.query.examRow.totalScore,
                time: this.$route.query.examRow.totalTime * 60 * 1000,

            };
        },
        mounted() {
            this.examRow = this.$route.query.examRow; // 获得考试数据
            this.initAllData();
            this.scatterScoreData();
        },
        methods: {
            initAllData(){
                this.getRequest('/exam/selectStudentByExamId/' + this.$route.query.examRow.id).then(resp => {
                    // 看一下返回信息
                    if (resp) {
                        this.unFinishData = resp.data.unread;
                        this.missData = resp.data.miss;
                        this.badData = resp.data.fail;
                        this.goodData = resp.data.pass;
                        this.$nextTick(function () {
                            this.drawPie("pieReport");
                        });
                    }
                })
            },

            // 获取当前考试的成绩散点图数据
            scatterScoreData() {
                this.getRequest('/exam/selectViewByExamId/' + this.$route.query.examRow.id).then(resp => {
                    // 看一下返回信息
                    if (resp) {

                        for (let i = 0; i < resp.data.length; i++) {
                            this.scatterData.push(Object.values(resp.data[i]));
                        }
                        this.$nextTick(function () {
                            this.drawScatter("scatterReport");
                        });
                    }
                })
            },
            // 散点图
            drawScatter(id) {
                this.charts = echarts.init(document.getElementById(id));
                this.charts.setOption({
                    title: {
                        text: this.examRow.description,
                        left: "left"
                    },
                    tooltip: {
                        // trigger: "axis",     //需要hover时出现黑框必须填这个
                        trigger: "item"     //需要hover时出现黑框必须填这个
                    },
                    xAxis: {
                        type: "value",
                        max: this.score,
                        min: 0,
                        name: "考试得分",
                        splitLine: {
                            lineStyle: {
                                type: "dashed"
                            }
                        },
                        maxInterval: this.score * 0.2,
                        minInterval: 1,
                        splitNumber: 4
                    },
                    yAxis: {
                        type: "value",
                        name: "考试用时(毫秒)",
                        max: this.time,
                        splitLine: {
                            lineStyle: {
                                type: "dashed"          //设置Y轴的虚线
                            }
                        },
                        maxInterval: this.time * 0.2,   //设置最大间隔
                        minInterval: 1,                //设置最小间隔
                        splitNumber: 4                //设置最多有多少个间隔
                    },
                    series: [
                        {
                            type: "scatter",      //表明这是散点图
                            symbolSize: 10,      //控制散点的大小
                            data: this.scatterData, // 获取当前考试的成绩散点图数据,   //连接数据
                            color: "#47c2ac",    //控制散点的颜色
                            tooltip:
                                {
                                    formatter: params => {
                                        //formatter:'{a} </br>{b} </br> {c}' 这个地方可以打印一下这个 ,当时我{c}一直是个数组 {c0}也拆不了 ,于是使用了下面的这个方法
                                        return `姓名 : ${params.value[3]} <br/>
                                            班级 : ${params.value[2]} <br/>
                                            考试得分 : ${params.value[0]} <br/>
                                            考试用时 : ${params.value[1] / 60000}分钟`;
                                    }
                                }
                        }
                    ]
                });
            },
            // 扇形图
            drawPie(id) {
                this.charts = this.$echarts.init(document.getElementById(id));
                this.charts.setOption({
                    tooltip: {
                        trigger: "item",
                        formatter: "{a}<br/>{b}:{c} ({d}%)"
                    },
                    legend: {
                        bottom: 10,
                        left: "center",
                        data: ["及格人数", "未及格人数", "缺考人数", "尚未改卷"],// 扇形图
                    },
                    series: [
                        {
                            name: "状态",
                            type: "pie",
                            radius: "65%",
                            center: ["50%", "50%"],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: "rgba(0, 0, 0, 0.5)"
                                },
                                color: function (params) {
                                    //自定义颜色
                                    var colorList = ["#1ab394", "#79d2c0", "#aa6d6d", "#867d7d"];
                                    return colorList[params.dataIndex];
                                }
                            },
                            data: [
                                {value: typeof(this.goodData.length)==undefined?0:this.goodData.length, name: "及格人数"},
                                {value: typeof(this.badData.length)==undefined?0:this.badData.length, name: "未及格人数"},
                                { value: typeof(this.missData.length)==undefined?0:this.missData.length, name: "缺考人数", itemStyle: "#aa6d6d" },
                                { value: typeof(this.unFinishData.length)==undefined?0:this.unFinishData.length, name: "尚未改卷", itemStyle: "#867d7d" }

                            ]
                        }
                    ]
                });
                let that = this;
                this.charts.on('click', function (param) {
                    // console.log(param.data.name);
                    if(param.data.name==="及格人数"){
                        that.curTableData = that.goodData;
                    }else if(param.data.name==="未及格人数"){
                        that.curTableData = that.badData;
                    }else if(param.data.name==="缺考人数"){
                        that.curTableData = that.missData;
                    }else{
                        that.curTableData = that.unFinishData;
                    }
                    that.drawer = true
                });
            },

        },
    }
</script>

<style scoped>

</style>